<template>
  <div class="index-card">
		<div class="title"><i :class="title.icon"></i><span>{{title.title}}</span></div>
		<div class="content">
			<slot name="content"></slot>
		</div>
  </div>
</template>

<script>
export default {
	name: 'IndexCard',
	props: {
		title: {
			type: Object,
			required: false,
			default: function() {
        return { /* */ }
      }
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.index-card{
		position: relative;
		width: 320px;
		height: 200px;
		overflow: hidden;
		margin: 5px;
		float: left;
		background-color: #fff;
		box-shadow: 0px 0px 20px rgba(218, 218, 218, 0.5);
		transition: all .5s;
		&:hover {
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
		}
		.title{
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			border-bottom: 1px solid #e5e6e7;
			>i{
				font-size: 16px;
				vertical-align: middle;
				margin: 0 2px;
			}
			>span{
				vertical-align: middle;
			}
		}
	}
</style>


